<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>datagrid demo</title>
    <style>
        .container {
            /* margin: 0 auto; */
            width: 90%;
            background-color: #fff;
            padding: 20px;
        }
    </style>
</head>

<body>

    <h1>datagrid demo</h1>
    <p class="tips">一款javascript实现的datagrid数据表格插件</p>

    <br />
    <h2>datagrid 演示<label class="tips">（支持单选多选全选、搜索、分页、内置查看添加编辑删除等常用功能，可通过自定义方法注入实现扩展功能）</label></h2>

    <h4 style="color:red">操作按钮点击时注意观察console输出</h4>

    <div class="container">
        <div class="wrapper"></div>
    </div>

    <link rel="stylesheet" href="../src/hippo/iconfont.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/layer/layer.js"></script>

    <link rel="stylesheet" href="../src/pagination/css/pagination.css">
    <script src="../src/pagination/pagination.js"></script>

    <link rel="stylesheet" href="../src/css/datagrid.css">
    <script src="../src/datagrid.js"></script>

    <script>
        // 查看：对话框打开后的回调
        const lookOpenCallback = function (form, record) {
            console.log('查看：对话框打开后的回调');
        };

        // 添加：对话框打开后的回调
        const addOpenCallback = function (form) {
            console.log('添加：对话框打开后的回调');
        };

        // 添加：请求前的回调
        const addBeforeCallback = function (form) {
            console.log('添加：请求前的回调');
        };

        // 编辑：对话框打开后的回调
        const editOpenCallback = function (form, record) {
            console.log('编辑：对话框打开后的回调');
        };

        // 编辑：请求前的回调
        const editBeforeCallback = function (form, record, formData) {
            console.log('编辑：请求前的回调');
        };

        // 扩展方法，用于注入到datagrid，供toolbar操作调用
        const checkinHandler = function (instance, params) {
            console.log('扩展方法，用于注入到datagrid，供toolbar操作调用');
        };

        // 搜索后的回调
        const searchCallback = function (form, records, params) {
            console.log('搜索后的回调');
            console.log(params.name); // 输出：ok
        };

        let rootUrl = '/';

        // 初始化datagrid
        funsent.datagrid.init('.container .wrapper', {
            title: '人员列表', // 标题参数，可选
            url: 'http://www.9k4k.com/datagrid/tests/getPersons.php', // url参数用于请求数据源
            primary_field: 'id', // 主键名称，必要参数
            query_params: {}, // url参数设置时，请求服务器时携带的额外参数
            method: 'get', // 默认请求方法
            dblclick_look: true, // 双击显示行数据
            pagination: true, // 是否分页
            page: 1, // 当前页码
            pagesize: 20, // 每页显示记录数
            show_rownumber: true, // 是否显示行号
            keep_rownumber: true, // 显示的行号是否在翻页时保持连续
            single_select: false, // 是否单选模式
            check_onselect: true, // 选择行时是否选中主键的checkbox
            select_oncheck: true, // 选中主键的checkbox时是否选择行
            striped: true, // 隔行显示颜色
            methods: { // 外部方法注入参数，用于扩展自己需要的功能，其参数有两个：instance和params
                checkin: checkinHandler
            },
            columns: [ // 数据列
                { field: 'id', title: '', width: '40px', halign: 'center', align: 'center', checkbox: true },
                { field: 'realname', title: '姓名', width: '100px', halign: 'left', align: 'left' },
                { field: 'gender', title: '性别', width: '40px', halign: 'center', align: 'center' },
                { field: 'age', title: '年龄', width: '40px', halign: 'center', align: 'center' },
                { field: 'birth', title: '出生年月', width: '100px', halign: 'center', align: 'center' },
                { field: 'mobile', title: '手机号码', width: '100px', halign: 'center', align: 'center' },
                { field: 'type_id', title: '人员类别', width: '100px', halign: 'center', align: 'center' },
                { field: 'major', title: '专业', width: '160px', halign: 'center', align: 'left' },
                { field: 'education_id', title: '学历', width: '100px', halign: 'center', align: 'center' },
                { field: 'update_time', title: '更新时间', width: '140px', halign: 'center', align: 'center' }
            ],
            toolbar: [ // 操作按钮（工具按钮），内置了查看look、添加add、编辑edit、删除delete等4中操作，如果需要额外操作按钮，可自行扩展（通过methods参数注入，或直接写在这里，如下面的报名操作）
                { form: '.form-look', text: '查看', icon_cls: 'iconfont icon-file', handler: 'look', url: '', params: { opened_callback: lookOpenCallback } },
                { form: '.form-add', text: '添加', icon_cls: 'iconfont icon-add-circle', handler: 'add', url: rootUrl + 'add_person', params: { before_callback: addBeforeCallback, opened_callback: addOpenCallback } },
                { form: '.form-edit', text: '编辑', icon_cls: 'iconfont icon-edit', handler: 'edit', url: rootUrl + 'edit_person', params: { before_callback: editBeforeCallback, opened_callback: editOpenCallback } },
                { form: '.form-delete', text: '删除', icon_cls: 'iconfont icon-minus-circle', handler: 'delete', url: rootUrl + 'delete_person', params: { message: '确定删除吗？' } },
                { form: '.form-checkin', text: '报名', icon_cls: 'iconfont icon-add-circle', handler: 'checkin', url: rootUrl + 'checkin_need', params: { title: '报名项目', width: '970px', height: '680px' } }
            ],
            searchbar: [ // 搜索条，类型有三种：select下拉选择框、text文本输入框和button搜索按钮，其中button类型只用于搜索按钮，且始终在最后呈现
                { type: 'text', width: '120px', field: 'realname', placeholder: '人员姓名', autocomplete: false },
                { type: 'text', width: '120px', field: 'mobile', placeholder: '手机号码', autocomplete: false },
                { type: 'button', text: '搜索', icon_cls: 'iconfont icon-search', params: { callback: searchCallback, name:'ok' } }
            ]
        });
    </script>
</body>

</html>